<template>
	<view class="content">
		<view class="wrap">
			<u-row gutter="12">
				<u-col span="12">
					<view class="row">
						<text>项目进度</text>
					</view>
				</u-col>
				<u-col span="12">
					<view class="row">
						<u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
					</view>
				</u-col>
				<u-col span="12">
					<view class="row">
						<u-divider bg-color="#161827"
							border-color="primary"
							color="#ed2f85"
							fontSize="45"
							height="50rpx"
							type="primary"
							margin-top="20"
							margin-bottom="20">上述项目问题,请联系我</u-divider>
					</view>
					<view class="row">
						<view @click="phone">
							<u-icon name="phone-fill" color="#2979ff" size="64"></u-icon>
							<text>170****3020(点击拨打)</text>
						</view>
					</view>
					<view class="row">
						<view @click="phone">
							<u-icon name="qq-fill" color="#2979ff" size="64"></u-icon>
							<text>858125124(添加联系)</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '进度',
				steps: [],
				current: 3,
				icon: 'checkmark',
				mode: 'number',
				direction: 'column'
			}
		},
		onLoad() {
			this.getProjects()
		},
		methods:{
			phone() {
				uni.makePhoneCall({
					phoneNumber: '17003713020'
				})
			},
			getProjects(){
				var _this = this;
				_this.$u.get('projects', {}, {
					'x-token': 'guojia',
				}).then(res => {
					_this.datas = res.datas;
					_this.length = res.length;
					_this.code = res.code;
					if( res.length > 0 ){
						for(var i=0; i<res.length; i++){
							var dic = {}
							dic["name"] = res.datas[i]["name"]
							// console.log(dic)
							_this.steps.push(dic)
						}
					}
					if( res.code === 404 ){
						_this.$refs.uToast.show({
							title: 'Ooops!~',
							type: 'error',
							duration: 2000
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		min-height: 100vh;
		background-color: #161827!important;
		padding: 24rpx;
	}
	.wrap {
		padding: 24rpx;
		// border: 1px dashed red;
		.row{
			// border: 1px solid blue;
			min-height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			// background-color: cyan;
			text {
				font-size: 45rpx;
				font-weight: bold;
			}
		}
	}
</style>
